<template>
  <div>
    <div class="topnav">
      <ul>
        <li @click="his(1)" :class="{useractive:1==head}">在职</li>
        <li @click="his(2)" :class="{useractive:2==head}">停用</li>
        <li @click="his(3)" :class="{useractive:3==head}">离职</li>
      </ul>
    </div>

    <div class="box_msg">
      <ul>
        <li v-for="ins in userlist" :key="ins.id">
          <div class="box_for">
            <img :src="ins.headImg" alt>
            <div class="box_sun" v-if="head==1">
              <div>{{companyname}}:{{ins.userName}}</div>
              <div>使用中</div>
              <div>
                <span @click="lizhi(ins.id)" name="lizhi">登记离职</span>
                <span @click="tingyong(ins.id)">登记停用</span>
              </div>
            </div>
            <div class="box_sun" v-else-if="head==2">
              <div>{{companyname}}：{{ins.userName}}</div>
              <div>已停用</div>
              <div @click="qiyong(ins.id)">重新启用</div>
            </div>
            <div class="box_sun" v-else>
              <div>{{companyname}}：{{ins.userName}}</div>
              <div>已离职</div>
              <div @click="pinyong(ins.id)">重新聘用</div>
            </div>
          </div>
        </li>

      </ul>
    </div>

    <div class="bombtn">
      <router-link :to="{name:'me_actxinjian'}">新建员工账号</router-link>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      head: 1,
      status: 1,
      userlist:'',
      staffListIn: [],
      staffListStop: [],
      staffListLeave: [],
      companyname:'',
      companyid:''
    };
  },
  mounted() {
   
    this.companyid=this.$route.query.companyid
    this.companyname=this.$route.query.companyname
    console.log(this.companyid,this.companyname)
    this.fetchStaff();
  },
  methods: {

    his(u) {
      console.log(this.companyid)
      if (this.head != u) {
        console.log('进入')
        this.head = u;
        if (u == 1) this.status = 1;
        if (u == 2) this.status = 0;
        if (u == 3) this.status = 2;
        console.log(this.status,this.companyid);
        this.$http
          .get(this.APIURL_PREFIX + "/api/wap/getStaff?status="+this.status+'&'+'companyId='+this.companyid)
          .then(res => {
            console.log(res);
            this.userlist=res.data.data
            console.log(this.userlist)
          });
      }
    },
    tingyong(id){
      console.log(id)
        this.$http
       .put(this.APIURL_PREFIX + "/api/wap/companyStaffs?id="+id+'&'+'status='+0)

          .then(response=>{
            console.log(response)
            window.location.reload()
          })
    },
    lizhi(id) {
      console.log('离职')
  var con=confirm('子账号登记离职后:该子账号将无法使用，并且无法参与分流无法查看聊天记录，该账号若拥有群，也将被解散该账号如果是专属客服，他的客户将变成未分配状态，建议先修改跟进人:无法提交与该账号相关的纠纷举证。')
  console.log(con)
  if(con==true){
    console.log(999)
    this.$http
       .put(this.APIURL_PREFIX + "/api/wap/companyStaffs?id="+id+'&'+'status='+2)

          .then(response=>{
            console.log(response)
            window.location.reload()
          })
  }
    },
    qiyong(id) {
      this.$http
       .put(this.APIURL_PREFIX + "/api/wap/companyStaffs?id="+id+'&'+'status='+1)
          .then(response=>{
            console.log(response)
            window.location.reload()
          })
    },
    pinyong(id) {
        this.$http
       .put(this.APIURL_PREFIX + "/api/wap/companyStaffs?id="+id+'&'+'status='+1)
          .then(response=>{
            console.log(response)
            window.location.reload()
          })
    },
    fetchStaff() {
      console.log(this.companyid)
      this.$http
          .get(this.APIURL_PREFIX + "/api/wap/getStaff?status="+this.status+'&'+'companyId='+this.companyid)
          .then(res => {
            console.log(res);
            this.userlist=res.data.data
            console.log(this.userlist)
          });
    }
    // fetchStaff() {
    //   let url = this.APIURL_PREFIX + "/api/wap/companyStaffs";
    //   this.$http.get(url, { params: { status: 1 } }).then(res => {
    //     this.staffListIn = res.data.data;
    //     // console.log(this.staffListIn)
    //   });
    //   this.$http.get(url, { params: { status: 0 } }).then(res => {
    //     this.staffListStop = res.data.data;
    //     // console.log(this.staffListIn)
    //   });
    //   this.$http.get(url, { params: { status: 2 } }).then(res => {
    //     this.staffListLeave = res.data.data;
    //     // console.log(this.staffListIn)
    //   });
    // }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/me_account.css";
</style>
